<template>
  <div class="page flex-col">
    <!-- 导航开始 -->
    <Navv :key="new Date().getTime()"></Navv>
    <!-- 导航结束 -->

    <img style="height: 640px;width: 100%;" src="../assets/images/dbj.jpg" />
    <div class="kssy center cursor" @click="toUrl('/center')">
      开始使用
    </div>
    <img class="kssy-img" src="../assets/images/log-wz.png">



    <div class="section_8 flex-col">
      <div class="box_22 column center">

        <div class="text-group_35">
          <span class="text_49">业务开放能力</span>
          <span class="text_50">提供运营及解决方案等能力</span>
        </div>

        <div class="grid_4  mt_30 center">

          <div class="itema column center">
            <img class="label_3" src="../assets/images/zxgd.png" />
            <div class="f_20 mt10">后台自由度高</div>
          </div>

          <div class="itema column center">
            <img class="label_3" src="../assets/images/ssck.png" />
            <div class="f_20 mt10">数据实时查看</div>
          </div>

          <div class="itema column center">
            <img class="label_3" src="../assets/images/24.png" />
            <div class="f_20 mt10">24小时技术支持</div>
          </div>

          <div class="itema column center">
            <img class="label_3" src="../assets/images/gx.png" />
            <div class="f_20 mt10">版本一键更新</div>
          </div>


          <div class="itema column center">
            <img class="label_3" src="../assets/images/wd.png" />
            <div class="f_20 mt10">渠道稳定护航</div>
          </div>

          <div class="itema column center">
            <img class="label_3" src="../assets/images/yx.png" />
            <div class="f_20 mt10">游戏轻松管理</div>
          </div>


        </div>

        <div class="text-wrapper_9 ce">
          <span class="text_52 center cursor" @click="toUrl('/center')">开发版本</span>
        </div>


      </div>
    </div>

    <!-- 游戏版本开发平台++++++ -->
    <div class="section_4 row ">

      <div class="section_16 ">
        <div class="text-wrapper_32 center">
          <span class="text_19">游戏版本开发平台</span>
        </div>

        <div class="block_13 center" style="margin-top: 60px;">
          <div class="row">

            <div class="row_a_c">


              <div class="column">
                <div class="yzz cursor" :class="[{ 'bg': activeIndex == 0 }]" @click="toggleStyle(0)">全局数据</div>
                <div class="yzz cursor" :class="[{ 'bg': activeIndex ==1 }]" @click="toggleStyle(1)">游戏管理</div>
                <div class="yzz cursor" :class="[ { 'bg': activeIndex == 2 }]" @click="toggleStyle(2)">财务管理</div>
                <div class="yzz cursor" :class="[ { 'bg': activeIndex == 3 }]" @click="toggleStyle(3)">人力资源</div>
                <div class="yzz cursor" :class="[ { 'bg': activeIndex == 4 }]" @click="toggleStyle(4)">账号管理</div>
              </div>




              <div class="shuxia"></div>

            </div>


            <img v-if="activeIndex==0" class="image_13" referrerpolicy="no-referrer" src="../assets/images/d0.png">
            <img v-if="activeIndex==1" class="image_13" referrerpolicy="no-referrer" src="../assets/images/d1.png">
            <img v-if="activeIndex==2" class="image_13" referrerpolicy="no-referrer" src="../assets/images/d2.png">
            <img v-if="activeIndex==3" class="image_13" referrerpolicy="no-referrer" src="../assets/images/d3.png">
            <img v-if="activeIndex==4" class="image_13" referrerpolicy="no-referrer" src="../assets/images/d4.png">

            <div class="group_29 flex-col">
              <div class="text-wrapper_6 flex-col">
                <span class="text_25 center cursor" @click="toUrl('/index')">点击使用</span>
              </div>
              <span class="paragraph_2">我们致力于为开发者提供游戏开发、游戏管理、技术沟通等各类能力和配套服务，在这里有完善的后台系统给予支持，可以及时解决开发者的问题。</span>

              <img class="image_6" referrerpolicy="no-referrer" src="../assets/images/chx.jpg">

              <span class="text_26">特点优势</span>
              <div class="group_30 flex-row center">
                <div class="group_6 flex-row">
                  <span class="text_27">方便快捷</span>
                </div>
                <div class="group_7 flex-row">
                  <div class="image-text_12 flex-row center">
                    <span class="text-group_2">稳定高效</span>
                  </div>
                </div>
                <div class="group_8 flex-row">
                  <div class="image-text_13 flex-row center">
                    <span class="text-group_3">安全保障</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 游戏版本开发平台JJJJJJJJJJ -->

    <!-- 游戏上线流程++++++ -->
    <div class=" row center">
      <div class="section_6 flex-col">
        <div class="text_28">游戏上线流程</div>
        <div class="section_17 flex-row">
          <span class="text_29">01</span>
          <div class="text-group_28 flex-col justify-between">
            <span class="text_30">注册</span>
            <span class="text_31">注册/登录平台账号</span>
          </div>
          <span class="text_32">02</span>
          <div class="text-group_29 flex-col justify-between">
            <span class="text_33">开发</span>
            <span class="text_34">提供测试程序和技术答疑</span>
          </div>
          <span class="text_35">03</span>
          <div class="text-group_30 flex-col justify-between">
            <span class="text_36">评测</span>
            <span class="text_37">测试版本和消费</span>
          </div>
          <span class="text_38">04</span>
          <div class="text-group_31 flex-col justify-between">
            <span class="text_39">投放渠道</span>
            <span class="text_40">游戏正式上线</span>
          </div>
        </div>

        <div class="group_10 flex-col"></div>
        <div class="center">
          <div class="text-wrapper_7 flex-col">
            <span class="text_41 center cursor" @click="toUrl('/center')">加入开发</span>
          </div>
        </div>
        <div class="group_11 flex-col"></div>
        <div class="thumbnail_8 flex-col"></div>
        <div class="group_12 flex-col"></div>
        <div class="thumbnail_9 flex-col"></div>
      </div>
    </div>
    <!-- 游戏上线流程jjjjjjj -->

    <div class="block_5 flex-col">
      <div class="text-wrapper_38  center ">
        <span class="cursor"  @click="batz" style="margin-right: 60px;">2024-比奇互娱&nbsp;&nbsp;|&nbsp;&nbsp;重庆比奇互娱网络科技有限公司&nbsp;&nbsp;|&nbsp;&nbsp;渝ICP备2023007615号-3</span>
        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=50009802002178" rel="noreferrer" target="_blank" class="row_a_c">
          <img style="height: 24px;width: 24px; margin-right: 10px;" src="@/assets/images/xuanxuan-image.png" />渝公网安备50009802002178
        </a>
      </div>
    </div>



    <!-- <img class="kssy-img" src="../assets/images/log-wz.png"> -->

    <!-- 模态框 -->
    <el-dialog @open="openDialog()" style="margin-top: 260px;" :visible.sync="dialogShow" width="500px" @close="closeDialog()">

      <span slot="title" class="dialog-footer" v-if="loginShow">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 账号登录++++++++++++ -->
          <el-tab-pane label="账号登录" name="first">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
              <el-form-item prop="username">
                <el-input class="mt_10" placeholder="请输入账号" v-model="loginForm.username" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input show-password class="" placeholder="请输入密码" v-model="loginForm.password" clearable></el-input>
              </el-form-item>
            </el-form>

            <div class="mt_20 row space-between">
              <div class="row ">
                <el-checkbox v-model="loginForm.agree"></el-checkbox>
                <!-- <el-checkbox v-model="agree"></el-checkbox> -->
                <div class="ml_5 f_14">我已阅读并同意<span @click="yhxxf" class="cursor" style="color: #3B88FE;">(开发者账号注册协议)</span></div>
              </div>
              <div class="f_14 color_9D9D9D cursor" @click="wjmm()">忘记密码</div>
            </div>
            <!-- <el-button @click.native.prevent="handleLogin('username')" size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary">登录</el-button> -->
            <el-button @click="handleLogin('username')" size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary">登录</el-button>

            <div class="space-between mt_20">
              <!-- <div class="f_15 cursor" @click="wxdl">微信授权登录</div> -->
              <div class="f_15 cursor"></div>
              <div class="f-15 color_1A82FB cursor" @click="ljzc">立即注册</div>
            </div>
          </el-tab-pane>
          <!-- 账号登录=========== -->

          <!-- 手机登录+++++++++++++ -->
          <el-tab-pane label="手机登录" name="second">
            <el-input class="mt_10" placeholder="请输入手机号" v-model="loginForm.mobile" clearable></el-input>
            <div class="row_a_c mt20 ">
              <el-input class=" " placeholder="请输入验证码" v-model="loginForm.code" clearable></el-input>
              <div v-if="!isCountdown" class="lzm center f_15 color_fff  cursor" @click.stop="sendSms(1)">获取验证码</div>
              <div v-else class="lzmhs center f_15   cursor"> {{ countdown }}秒后重新获取</div>
            </div>

            <div class="mt_20 row space-between">
              <div class="row ">
                <el-checkbox v-model="loginForm.agree"></el-checkbox>
                <div class="ml_5 f_14">我已阅读并同意<span @click="yhxxf" class="cursor" style="color: #3B88FE;">(开发者账号注册协议)</span></div>
              </div>
              <div class="f_14 color_9D9D9D cursor" @click="wjmm()">忘记密码</div>
            </div>
            <el-button size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary" @click="handleLogin('mobile')">登录</el-button>

            <div class="space-between mt_20">
              <!-- <div class="f_15 cursor" @click="wxdl">微信授权登录</div> -->
              <div class="f_15 cursor"></div>
              <div class="f-15 color_1A82FB cursor" @click="ljzc">立即注册</div>
            </div>
          </el-tab-pane>
          <!-- 手机登录====================== -->

        </el-tabs>
      </span>


      <!-- 找回密码 -->
      <span slot="title" class="dialog-footer" v-if="wjmmShow">
        <el-form ref="retrieveForm" :model="retrieveForm" :rules="retrieveRules">
          <el-tabs v-model="wjmmName" @tab-click="handleClick">
            <el-tab-pane label="找回密码" name="wjmmfirst">

              <el-form-item prop="mobile">
                <el-input class="mt_10" placeholder="请输入手机号" v-model="retrieveForm.mobile" clearable></el-input>
              </el-form-item>

              <el-form-item prop="code">
                <div class="row ">
                  <el-input class="row_a_c" placeholder="请输入验证码" v-model="retrieveForm.code" clearable></el-input>
                  <div v-if="!isCountdown" class="lzm center f_15 color_fff  cursor" @click.stop="sendSms(3)">
                    获取验证码</div>
                  <div v-else class="lzmhs center f_15   cursor"> {{ countdown }}秒后重新获取</div>
                </div>
              </el-form-item>

              <el-form-item prop="password">
                <el-input show-password class="" placeholder="请输入新密码" v-model="retrieveForm.password" clearable></el-input>
                <div class="color_9D9D9D f_15 mt5">
                  8-16位,可由任意大小写字母、特殊字符和数字组成
                </div>
              </el-form-item>


              <el-form-item prop="affirm_password">
                <el-input show-password class="" placeholder="确认新密码" v-model="retrieveForm.affirm_password" clearable></el-input>
              </el-form-item>

              <div class="space-between ">
                <el-button @click="quxiao()" size="medium" style="width: 45%;height: 38px;margin-left: 20px;" class="mt_30 mr_10" type="info">取消</el-button>
                <el-button size="medium" style="width: 45%;height: 38px;margin-right: 20px;" class="mt_30" type="primary" @click="retpas">确定</el-button>
              </div>

            </el-tab-pane>

          </el-tabs>
        </el-form>
      </span>
      <!-- 找回密码================================= -->

      <!-- 注册账号+++++++++++++++++ -->
      <span slot="title" class="dialog-footer" v-if="ljzcShow">
        <el-form ref="regForm" :model="regForm" :rules="regRules">
          <el-tabs v-model="ljzcName" @tab-click="handleClick">
            <el-tab-pane label="注册账号" name="ljzcfirst">


              <el-form-item prop="mobile">
                <el-input class="mt_10" placeholder="请输入手机号" v-model="regForm.mobile" clearable></el-input>
              </el-form-item>

              <el-form-item prop="code">
                <div class="row_a_c">
                  <el-input placeholder="请输入验证码" v-model="regForm.code" clearable></el-input>
                  <div v-if="!isCountdown" class="lzm center f_15 color_fff  cursor" @click.stop="sendSms(2)">获取验证码
                  </div>
                  <div v-else class="lzmhs center f_15   cursor"> {{ countdown }}秒后重新获取</div>
                </div>
              </el-form-item>



              <el-form-item prop="password">
                <el-input show-password class="" placeholder="请输入密码" v-model="regForm.password" clearable></el-input>
                <div class="color_9D9D9D f_15 ">
                  8-16位,可由任意大小写字母、特殊字符和数字组成
                </div>
              </el-form-item>



              <el-form-item prop="affirm_password">
                <el-input show-password class="" placeholder="请再次确认账号密码" v-model="regForm.affirm_password" clearable></el-input>
              </el-form-item>

              <div class=" row space-between">
                <div class="row ">
                  <el-checkbox v-model="regForm.agree"></el-checkbox>
                  <div class="ml_5 f_14">我已阅读并同意<span @click="yhxxf" class="cursor" style="color: #3B88FE; ">(开发者账号注册协议)</span></div>
                </div>
              </div>

              <el-button @click="register" size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary">注册</el-button>
            </el-tab-pane>

          </el-tabs>
        </el-form>
      </span>
      <!-- 注册账号======================= -->
    </el-dialog>

    <el-dialog title="开发者协议" :visible.sync="yhxx" width="100%" center>
      <span v-html="kfzxx"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="yhxx = false">取 消</el-button>
        <el-button type="primary" @click="yhxx = false">确 定</el-button>
      </span>
    </el-dialog>



  </div>
</template>






<script>
  import * as Login from "@/api/login";
  import Cookies from "js-cookie";
  import * as Advert from "@/api/operation/advert";
  import * as Notice from "@/api/system/notice";
  import * as News from "@/api/system/news";
  import * as Config from "@/api/system/config";
  import {
    encrypt,
    decrypt
  } from '@/utils/jsencrypt'
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  import Navv from "@/components/Navv";
  import {
    Notification,
    MessageBox,
    Message,
    Loading
  } from 'element-ui'
  export default {
    name: "Login",
    components: {
      Navv
    },
    data() {
      return {
        config_remark: null,
        activeIndex: 0,
        countdown: 60,
        isCountdown: false,

        login_reg: 1, //1登录 2注册
        kfzxx: '',
        yhxx: false,
        xtwf: false, //系统维护
        xtxfInfo: null,
        // 查询参数
        queryParamsA: {
          page: 1,
          pageSize: 10,
          advert_place_id: 14
        },
        queryParamsB: {
          page: 1,
          pageSize: 10,
          advert_place_id: 15
        },

        //通知公告
        queryParamsC: {
          page: 1,
          pageSize: 2,

        },

        AdvertListA: [], //广告列表A
        AdvertListB: [], //广告列表B
        NoticeList: [], //通知公告
        activeName: 'first',
        wjmmName: 'wjmmfirst',
        ljzcName: 'ljzcfirst',
        dialogShow: false,
        loginShow: true,
        wjmmShow: false, //忘记密码
        ljzcShow: false, //立即注册
        xyShow: false, //学院
        wdShow: false, //文档




        codeUrl: "",
        agree: true,
        loginForm: {
          agree: true,
          username: "",
          password: "",
          mobile: '',
          code: '',
          par: '', //1账户 2手机
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            message: "请输入您的账号"
          }],
          password: [{
            required: true,
            trigger: "blur",
            message: "请输入您的密码"
          }]
        },

        regForm: {
          agree: true,
          mobile: '',
          code: '',
          password: '',
          affirm_password: '',
        },


        //注册++++++++++++++++
        regRules: {
          mobile: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号"
          }],
          code: [{
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }],
          password: [{
              required: true,
              trigger: "blur",
              message: "请输入您的密码"
            },
            {
              min: 8,
              max: 16,
              message: '长度在 8 到 16 个字符',
              trigger: 'blur'
            }
          ],
          affirm_password: [{
            required: true,
            trigger: "blur",
            message: "请输入您的确认密码"
          }]
        },

        //注册===========

        //找回密码++++++++++++++++
        retrieveForm: {
          mobile: '',
          code: '',
          password: '',
          affirm_password: '',
        },

        retrieveRules: {
          mobile: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号"
          }],
          code: [{
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }],
          password: [{
              required: true,
              trigger: "blur",
              message: "请输入您的密码"
            },
            {
              min: 8,
              max: 16,
              message: '长度在 8 到 16 个字符',
              trigger: 'blur'
            }
          ],
          affirm_password: [{
            required: true,
            trigger: "blur",
            message: "请输入您的确认密码"
          }]
        },
        //找回密码===============
        loading: false,

      };
    },

    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      console.log('aaa');
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      console.log('flag', flag);
      if (flag) {
        console.log('VUE_APP_SKPI', process.env.VUE_APP_SKPI);
        //如果flag不为空，说明可以匹配到，是手机端
        window.location.href = process.env.VUE_APP_SKPI;
      }
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?e55f121d192e68518664356393f5adff";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();

      this.getAdvertListA();
      this.getAdvertListB();
      this.getNoticeList(); //通知，公告
      this.getCookie();
      this.getUserAgreement(); //获取用户协议
      this.getConfigInfo(); //获取配置详情

    },
    mounted() {
      this.$set(this.loginForm, 'agree', true);
      this.$set(this.regForm, 'agree', true);
    },
    methods: {

      batz() {
        window.open("https://beian.miit.gov.cn", "_blank");
      },

      toggleStyle(index) {
        this.activeIndex = index;
      },

      //到计时
      startCountdown() {
        if (!this.isCountdown) {
          this.isCountdown = true;
          let timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown--;
            } else {
              clearInterval(timer);
              this.isCountdown = false;
              this.countdown = 60; // 重置倒计时
            }
          }, 1000);
        }
      },




      /**获取配置详情 */
      getConfigInfo() {

        Config.info().then(response => {
          this.xtxfInfo = response.data;
          if (response.data.config_value == 1) {
            this.config_remark = response.data.remark
            // this.handleClose();
          } else {

          }


        });
      },

      handleClose() {
        MessageBox.confirm(this.config_remark, '系统提示', {
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          this.handleClose();
          // this.$emit('value-updated', '/center/dataAnalysis');
          // this.$router.push({
          //   path: '/center/dataAnalysis'
          // });
        }).catch(() => {
          this.handleClose();
          // this.$emit('value-updated', '/center/dataAnalysis');
          // this.$router.push({
          //   path: '/center/dataAnalysis'
          // });
        });
      },

      /**获取用户协议 */
      getUserAgreement() {

        // this.loading = true;
        News.getUserAgreement().then(response => {
          this.kfzxx = response.data.content
          // this.GameList = response.data.rows;
          // this.game_count = response.data.total;
          // this.loading = false;
        });
      },

      yhxxf() {
        this.yhxx = true
      },
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");

        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : decrypt(password),

        };
      },
      /** 查询广告列表A */
      getAdvertListA() {
        this.loading = true;
        Advert.List(this.addDateRange(this.queryParamsA)).then(response => {
          this.AdvertListA = response.data.rows;
          this.loading = false;
        });
      },
      /** 查询广告列表B*/
      getAdvertListB() {
        this.loading = true;
        Advert.List(this.addDateRange(this.queryParamsB)).then(response => {
          this.AdvertListB = response.data.rows;
          this.loading = false;
        });
      },


      /**通知，公告 */
      getNoticeList() {
        this.loading = true;
        this.loading = true;
        this.queryParamsC.type_pj = 1
        Notice.getList(this.queryParamsC).then(response => {
          // this.NoticeList = response.data.rows;
          this.NoticeList = response.data.list;
          this.loading = false;
        });
      },

      fatherMethod(type) {
        this.login_reg = type
        //type 1登录 2注册
        console.log('测试', type);
        this.dialogShow = !this.dialogShow
      },


      //发送短信
      sendSms(type) {
        this.startCountdown();
        //type 1 手机登录 2 注册 3找回密码
        this.loading = true;
        if (type == 1) {
          var mobile = this.loginForm.mobile
          var scene = 'login'
        }
        if (type == 2) {
          var mobile = this.regForm.mobile
          var scene = 'register'
        }

        if (type == 3) {
          var mobile = this.retrieveForm.mobile
          var scene = 'retrieve_password'
        }



        Login.sendSms({
          mobile: mobile,
          scene: scene
        }).then(response => {
          this.retrieveForm.code = response.data
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.loading = false;
        });
      },

      handleLogin(type) {
        if (type == "username") {
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              if (!this.loginForm.agree) {
                this.$message({
                  message: '请阅读开发者账号注册协议111',
                  type: 'warning',
                  duration: 0
                });
              } else {
                this.loading = true;
                this.loginForm.agree = true;
                Cookies.set("username", this.loginForm.username, {
                  expires: 30
                });
                Cookies.set("password", encrypt(this.loginForm.password), {
                  expires: 30
                });
                // Cookies.remove("username");
                // Cookies.remove("password");

                this.loginForm.par = 1;
                this.$store.dispatch("Login", this.loginForm).then(() => {
                  this.$router.push({
                    path: this.redirect || "/center/dataAnalysis"
                  }).catch(() => {});
                }).catch(() => {
                  this.loading = false;
                  // if (this.captchaOnOff) {
                  //   this.getCode();
                  // }
                });
              }
            }
          });
        } else {
          if (!this.loginForm.agree || !this.loginForm.mobile || !this.loginForm.code) {
            this.$message({
              message: '参数错误',
              type: 'warning'
            });
          } else {
            this.loginForm.par = 2;
            this.$store.dispatch("Login", this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || "/center/dataAnalysis"
              }).catch(() => {});
            }).catch(() => {
              this.loading = false;
              this.$message({
                message: '验证码不正确',
                type: 'warning'
              });
              // if (this.captchaOnOff) {
              //   this.getCode();
              // }
            });

          }
        }

      },

      //手机登录
      mobileLogin() {
        console.log('aaa', this.loginForm.mobile)
        if (!this.loginForm.agree || !this.loginForm.mobile || !this.loginForm.code) {
          this.$message({
            message: '参数错误',
            type: 'warning'
          });
        } else {
          this.loading = true;
          Login.mobileLogin({
            agree: this.loginForm.agree,
            mobile: this.loginForm.mobile,
            code: this.loginForm.code,
          }).then(response => {

            this.$message({
              message: response.message,
              type: 'success'
            });

            this.dialogShow = false;
            this.loading = false;
          }).catch(error => {
            this.$message.error(error.response.data.message);
          });
        }
      },



      //注册
      register() {
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            if (!this.regForm.agree) {
              this.$message({
                message: '请阅读开发者账号注册协议',
                type: 'warning'
              });
            } else {
              this.loading = true;
              Login.register({
                agree: this.regForm.agree,
                mobile: this.regForm.mobile,
                password: this.regForm.password,
                affirm_password: this.regForm.affirm_password,
                code: this.regForm.code,
              }).then(response => {
                this.$message({
                  message: response.message,
                  type: 'success'
                });
                // this.dialogShow = false;

                this.$set(this.loginForm, 'username', this.regForm.mobile)
                this.$set(this.loginForm, 'password', this.regForm.password)

                this.loginShow = true;
                this.ljzcShow = false;
                this.wjmmShow = false;

                this.loading = false;
              }).catch(error => {
                this.$message.error(error.response.data.message);
              });
            }



          }
        });

      },

      //找回密码
      retpas() {
        this.$refs.retrieveForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            Login.retpas({
              mobile: this.retrieveForm.mobile,
              password: this.retrieveForm.password,
              affirm_password: this.retrieveForm.affirm_password,
              code: this.retrieveForm.code,
            }).then(response => {
              this.$message({
                message: response.message,
                type: 'success'
              });
              this.dialogShow = false;
              this.loading = false;
            }).catch(error => {
              this.$message.error(error.response.data.message);
            });

          }
        });

      },


      toUrln(url) {
        this.$router.push({
          path: url
        })
      },





      toUrl(url) {
        var token = getToken();
        if (!token) {
          this.fatherMethod(1)
          // this.$message({
          //   message: '请先登录',
          //   type: 'warning'
          // });
        } else {
          this.$router.push({
            path: url
          })
        }
      },


      quxiao() {
        this.dialogShow = false;
      },
      //点击密码
      wjmm() {
        this.wjmmShow = true;
        this.loginShow = false;
        this.ljzcShow = false;
      },
      //打开模态框
      openDialog() {
        //1登录 2注册
        if (this.login_reg == 1) {
          this.dialogShow = true;
          this.loginShow = true;;
          this.wjmmShow = false;
          this.ljzcShow = false;
        } else {
          this.dialogShow = true;
          this.loginShow = false;;
          this.wjmmShow = false;
          this.ljzcShow = true;
        }

      },
      //关闭模态框
      closeDialog() {
        // this.dialogShow = false;
        // this.wjmmShow = false;
        // this.ljzcShow = false;
        // this.loginShow = false;
      },


      // 微信登陆
      wxdl() {
        var redirectURI = 'http://www.zdindin.com/'; ///扫码后回调地址
        var appId = 'wx515d8d1893f1e1f5'; //公众号平台提供的appIdlet
        window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=' +
          redirectURI + '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect'
      },




      ljzc() {
        this.ljzcShow = true;
        this.wjmmShow = false;
        this.loginShow = false;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },


    }
  };
</script>
<style scoped lang="scss">
  // body,
  // html {
  //   background: #fff !important;
  // }
  ::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 0vh !important;
  }
</style>

<style scoped>
  .el-tabs__item.is-active {
    color: #000000;
    font-weight: bold;
    font-size: 18px;
  }

  .el-input--medium .el-input__inner {
    height: 38px;
    line-height: 38px;
  }

  .el-input__inner:hover {
    border-color: #E7EFFD;
    background: #E7EFFD;
  }

  .el-dialog__headerbtn .el-dialog__close {
    font-size: 26px;
  }

  .el-button--medium {
    font-size: 18px;
  }



  .el-dialog__body {
    padding: 10px 10px;
  }

  .lzm {
    width: 110px;
    height: 36px;
    background: #1A82FB;
    border-radius: 0px 5px 5px 0px;
  }


  .lzmhs {
    color: #515151;
    width: 150px;
    height: 38px;
    background: #F3F3F4;
    border-radius: 0px 5px 5px 0px;
  }


  .el-button--info {
    color: #9D9D9D;
    background-color: #F3F3F4;
    border-color: #F3F3F4;
  }

  .el-button--info:hover,
  .el-button--info:focus {
    background: #ebebeb;
    border-color: #ebebeb;
    color: #515151;
  }

  .page {

    /* height: 3680px; */
    overflow: hidden;
  }

  .box_20 {

    height: 3680px;
  }

  .section_13 {
    position: relative;

    height: 3375px;
  }

  .section_1 {
    background-color: white;

    height: 90px;
  }

  .image_11 {
    width: 234px;
    height: 58px;
    margin: 11px 0 0 92px;
  }

  .text_1 {
    width: 34px;
    height: 18px;
    overflow-wrap: break-word;
    color: black;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 18px;
    margin: 36px 0 0 60px;
  }



  .text_2 {
    width: 35px;
    height: 17px;
    overflow-wrap: break-word;
    color: black;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 18px;
    margin: 36px 0 0 69px;
  }

  .thumbnail_1 {
    width: 12px;
    height: 7px;
    margin: 41px 0 0 8px;
  }

  .text_3 {
    width: 35px;
    height: 17px;
    overflow-wrap: break-word;
    color: black;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 18px;
    margin: 36px 0 0 66px;
  }

  .thumbnail_2 {
    width: 12px;
    height: 7px;
    margin: 41px 0 0 9px;
  }

  .text_4 {
    width: 53px;
    height: 18px;
    overflow-wrap: break-word;
    color: black;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 18px;
    margin: 35px 0 0 60px;
  }

  .text-wrapper_1 {
    background-color: #1a82fb;
    border-radius: 10px;
    height: 37px;
    width: 95px;
    margin: 26px 0 0 0px;
  }

  .text_6 {
    width: 70px;
    height: 17px;
    overflow-wrap: break-word;
    color: white;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 18px;
    margin: 10px 0 0 12px;
  }

  .label_5 {
    width: 43px;
    height: 36px;
    margin: 27px 0 0 88px;
  }

  .text_7 {
    width: 79px;
    height: 20px;
    overflow-wrap: break-word;
    color: black;
    font-size: 18px;
    font-family: SourceHanSansSC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 36px 92px 0 15px;
  }



  .text_8 {
    width: 366px;
    height: 54px;
    overflow-wrap: break-word;
    color: white;
    font-size: 60px;
    font-family: zihun4hao-cangjinxingkaiti;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 60px;
    margin: 155px 0 0 371px;
  }

  .paragraph_1 {
    width: 612px;
    height: 50px;
    overflow-wrap: break-word;
    color: white;
    font-size: 20px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    line-height: 31px;
    margin: 19px 0 0 372px;
  }

  .text-wrapper_2 {
    background-color: #1a82fb;
    height: 58px;
    width: 178px;
    margin: 76px 0 0 373px;
  }

  .text_9 {
    width: 89px;
    height: 22px;
    overflow-wrap: break-word;
    color: white;
    font-size: 22px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 46px;
    margin: 18px 0 0 44px;
  }

  .section_15 {
    width: 130px;
    height: 4px;
    margin: 161px 0 63px 373px;
  }

  .box_2 {
    background-color: #1a82fb;
    width: 40px;
    height: 4px;
  }

  .box_3 {
    background-color: rgba(171, 197, 233, 0.5);
    width: 40px;
    height: 4px;
    margin-left: 5px;
  }

  .box_4 {
    background-color: rgba(171, 197, 233, 0.5);
    width: 40px;
    height: 4px;
    margin-left: 5px;
  }

  .section_3 {
    /* background: red !important; */
    background-color: white;
    width: 100%;
    height: 70px;
  }

  .image-text_10 {
    width: 75px;
    height: 26px;
    margin: 21px 0 0 0px;
  }

  .label_6 {
    width: 28px;
    height: 26px;
  }

  .text-group_1 {
    width: 34px;
    height: 18px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 18px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 4px;
  }

  .image_3 {
    width: 1px;
    height: 27px;
    margin: 20px 0 0 21px;
  }

  .image_12 {
    width: 60px;
    height: 29px;
    margin: 19px 0 0 18px;
  }

  .text_11 {
    width: 47px;
    height: 15px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 25px 0 0 7px;
  }

  .thumbnail_3 {
    width: 1px;
    height: 16px;
    margin: 26px 0 0 17px;
  }

  .text_12 {
    width: 144px;
    height: 15px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 25px 0 0 17px;
  }

  .text_13 {
    width: 64px;
    height: 13px;
    overflow-wrap: break-word;
    color: #79828e;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 26px 0 0 0px;
  }

  .image_4 {
    width: 1px;
    height: 27px;
    margin: 20px 0 0 21px;
  }

  .text-wrapper_4 {
    background-color: #e0cfdd;
    border-radius: 3px;
    height: 28px;
    width: 60px;
    margin: 20px 0 0 17px;
  }

  .text_14 {
    width: 42px;
    height: 14px;
    overflow-wrap: break-word;
    color: #f8413f;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 57px;
    margin: 8px 0 0 10px;
  }


  .syh {
    line-height: 68px;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  .text_156 {

    width: 31px;
    /* height: 15px; */
    overflow-wrap: break-word;
    color: #242424;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 25px 0 0 22px;
  }

  .thumbnail_4 {
    width: 1px;
    height: 16px;
    margin: 26px 0 0 19px;
  }

  .text_16 {
    width: 181px;
    height: 15px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 8px 0 0 19px;
  }

  .text_17 {
    width: 63px;
    height: 13px;
    overflow-wrap: break-word;
    color: #79828e;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 26px 0 0 0px;
  }

  .image_5 {
    width: 1px;
    height: 27px;
    margin: 20px 0 0 19px;
  }

  .text_18 {
    width: 63px;
    height: 15px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 25px 313px 0 24px;
  }

  .section_4 {
    background-color: #0f141d;
    height: 617px;
    /* margin-top: 691px; */

  }

  .section_16 {
    height: 618px;
    background-image: url("../assets/images/b3.png");
    background-size: 100% 100%;
    width: 100%;
    margin: 0px 0 0 0px;
  }

  .text-wrapper_32 {
    width: 100%;
    height: 29px;
    margin: 72px 0 0 0px;
  }

  .text_19 {
    width: 238px;
    height: 29px;
    overflow-wrap: break-word;
    color: white;
    font-size: 30px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
  }


  .group_28 {
    width: 186px;
    height: 256px;
    margin-top: 2px;
  }

  .image-text_11 {
    width: 186px;
    height: 90px;
  }



  .yzz {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #E3E3E3;
    /* margin-bottom: 40px; */
    height: 65px;

  }

  .shuxiaddd {}

  .bg {

    border-right: 2px solid #3C8EEE;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 65px;
    width: 186px;
    background-image: url("../assets/images/b4.png");
    background-size: 100% 100%;

  }

  .shuxia {
    width: 2px;
    height: 340px;
    background: #435167;
    opacity: 0.5;
    margin-left: -2px;
  }

  .text_20 {

    overflow-wrap: break-word;
    color: #e3e3e3;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
    margin: 19px 0 0 110px;
  }



  .xiashu {
    background-color: rgba(67, 81, 103, 0.5);
    height: 350px;
    width: 2px;
    position: absolute;
    left: 183px;
    top: 0;
  }

  .xia {
    background-color: #3c8eee;
    width: 2px;
    height: 55px;
  }

  .text_21 {
    width: 63px;
    height: 16px;
    overflow-wrap: break-word;
    color: #e3e3e3;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
    margin: 18px 0 0 110px;
  }



  .text_23 {
    width: 63px;
    height: 15px;
    overflow-wrap: break-word;
    color: #e3e3e3;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
    margin: 40px 0 0 111px;
  }

  .text_24 {
    width: 62px;
    height: 16px;
    overflow-wrap: break-word;
    color: #e3e3e3;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
    margin: 40px 0 0 110px;
  }

  .image_13 {
    width: 173px;
    height: 350px;
    margin-left: 67px;
  }

  .group_29 {
    width: 528px;
    height: 322px;
    margin: 2px 0 0 45px;
  }

  .text-wrapper_6 {
    background-color: #1a82fb;
    height: 52px;
    width: 145px;
  }

  .text_25 {
    width: 100px;
    height: 24px;
    overflow-wrap: break-word;
    color: white;
    font-size: 25px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
    margin: 14px 0 0 23px;
  }

  .paragraph_2 {
    width: 527px;
    height: 36px;
    line-height: 30px;
    overflow-wrap: break-word;
    color: #e3e3e3;
    font-size: 16px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    margin: 51px 0 0 1px;
  }

  .image_6 {
    width: 465px;
    height: 1px;
    margin-top: 92px;
  }

  .text_26 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: #e3e3e3;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 23px;
  }

  .group_30 {
    width: 453px;
    height: 36px;
    margin-top: 15px;
  }

  .group_6 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    width: 145px;
    height: 36px;
  }

  .text_27 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: white;
    font-size: 14px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 14px;
    margin: 10px 0 0 35px;
  }

  .thumbnail_5 {
    width: 7px;
    height: 11px;
    margin: 13px 12px 0 36px;
  }

  .group_7 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    width: 145px;
    height: 36px;
    margin-left: 9px;
  }

  .image-text_12 {
    width: 122px;
    height: 15px;
    margin: 10px 0 0 8px;
  }

  .text-group_2 {
    width: 98px;
    height: 15px;
    overflow-wrap: break-word;
    color: white;
    font-size: 14px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 14px;
  }

  .thumbnail_6 {
    width: 7px;
    height: 11px;
    margin-top: 3px;
  }

  .group_8 {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    width: 145px;
    height: 36px;
    margin-left: 9px;
  }

  .image-text_13 {
    width: 118px;
    height: 14px;
    margin: 10px 0 0 15px;
  }

  .text-group_3 {
    width: 98px;
    height: 14px;
    overflow-wrap: break-word;
    color: white;
    font-size: 14px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 14px;
  }

  .thumbnail_7 {
    width: 7px;
    height: 11px;
    margin-top: 3px;
  }

  .section_6 {
    background-color: white;
    position: relative;

    height: 456px;
    margin-bottom: 1px;
  }

  .text_28 {
    width: 100%;
    height: 29px;
    overflow-wrap: break-word;
    color: black;
    font-size: 30px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin: 90px 0 0 0;
  }

  .section_17 {
    width: 100%;
    height: 44px;
    margin: 59px 0 0 0px;
  }

  .text_29 {
    width: 36px;
    height: 41px;
    overflow-wrap: break-word;
    color: #1a82fb;
    font-size: 44px;
    font-family: Bebas;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
  }

  .text-group_28 {
    width: 118px;
    height: 42px;
    margin: 2px 0 0 20px;
  }

  .text_30 {
    width: 43px;
    height: 21px;
    overflow-wrap: break-word;
    color: black;
    font-size: 22px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
  }

  .text_31 {
    width: 118px;
    height: 15px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
    margin-top: 6px;
  }

  .text_32 {
    width: 45px;
    height: 41px;
    overflow-wrap: break-word;
    color: #1a82fb;
    font-size: 44px;
    font-family: Bebas;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin-left: 82px;
  }

  .text-group_29 {
    width: 154px;
    height: 41px;
    margin: 2px 0 0 16px;
  }

  .text_33 {
    width: 42px;
    height: 22px;
    overflow-wrap: break-word;
    color: black;
    font-size: 22px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
  }

  .text_34 {
    width: 154px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
    margin-top: 5px;
  }

  .text_35 {
    width: 45px;
    height: 41px;
    overflow-wrap: break-word;
    color: #1a82fb;
    font-size: 44px;
    font-family: Bebas;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin-left: 46px;
  }

  .text-group_30 {
    width: 99px;
    height: 40px;
    margin: 3px 0 0 15px;
  }

  .text_36 {
    width: 43px;
    height: 20px;
    overflow-wrap: break-word;
    color: black;
    font-size: 22px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
  }

  .text_37 {
    width: 98px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
    margin: 6px 0 0 1px;
  }

  .text_38 {
    width: 46px;
    height: 41px;
    overflow-wrap: break-word;
    color: #1a82fb;
    font-size: 44px;
    font-family: Bebas;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin-left: 101px;
  }

  .text-group_31 {
    width: 112px;
    height: 41px;
    margin: 2px 0 0 15px;
  }

  .text_39 {
    width: 86px;
    height: 22px;
    overflow-wrap: break-word;
    color: black;
    font-size: 22px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
  }

  .text_40 {
    width: 112px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
    margin-top: 5px;
  }

  .group_10 {
    background-color: #efeff0;
    width: 100%;
    height: 1px;
    margin: 24px 0 0 0;
  }

  .text-wrapper_7 {
    background-color: #1a82fb;
    height: 46px;
    width: 134px;
    margin: 54px 0 0px 0;
  }

  .text_41 {
    width: 71px;
    height: 18px;
    overflow-wrap: break-word;
    color: white;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin: 14px 0 0 32px;
  }

  .group_11 {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 12px;
    top: 240px;
    width: 14px;
    height: 14px;
    border: 2px solid #1a82fb;
  }

  .thumbnail_8 {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 532px;
    top: 240px;
    width: 14px;
    height: 14px;
    border: 2px solid #1a82fb;
  }

  .group_12 {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 270px;
    top: 240px;
    width: 14px;
    height: 14px;
    border: 2px solid #1a82fb;
  }

  .thumbnail_9 {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 800px;
    top: 240px;
    width: 14px;
    height: 14px;
    border: 2px solid #1a82fb;
  }

  .section_7 {
    background-color: #f7f9fa;
    height: 810px;

    position: absolute;
    left: 0;
    top: 797px;
  }



  .section_18 {
    width: 359px;
    height: 59px;
    margin: 86px 0 0 626px;
  }

  .text-group_32 {
    width: 359px;
    height: 59px;
  }

  .text_42 {
    width: 359px;
    height: 29px;
    overflow-wrap: break-word;
    color: black;
    font-size: 30px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
  }

  .text_43 {
    width: 112px;
    height: 14px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 14px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 16px 0 0 123px;
  }

  .section_19 {
    width: 1180px;
    height: 152px;
    margin: 168px 0 0 209px;
  }

  .image-wrapper_1 {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    height: 52px;
    margin-top: 53px;
    width: 52px;
  }

  .thumbnail_10 {
    width: 10px;
    height: 18px;
    margin: 17px 0 0 22px;
  }

  .text-group_33 {
    width: 132px;
    height: 103px;
    margin: 25px 0 0 40px;
  }

  .text_44 {
    width: 38px;
    height: 35px;
    overflow-wrap: break-word;
    color: #1a82fb;
    font-size: 38px;
    font-family: Bebas;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 27px;
  }

  .text_45 {
    width: 79px;
    height: 20px;
    overflow-wrap: break-word;
    color: black;
    font-size: 20px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 27px;
    margin: 15px 0 0 1px;
  }

  .paragraph_3 {
    width: 131px;
    height: 24px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 11px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 11px;
    margin: 9px 0 0 1px;
  }

  .text-group_34 {
    width: 192px;
    height: 152px;
    margin-left: 89px;
  }

  .text_47 {
    width: 46px;
    height: 52px;
    overflow-wrap: break-word;
    color: #1a82fb;
    font-size: 56px;
    font-family: Bebas;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin-left: 4px;
  }

  .text_48 {
    width: 118px;
    height: 29px;
    overflow-wrap: break-word;
    color: black;
    font-size: 30px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41px;
    margin: 21px 0 0 2px;
  }

  .paragraph_4 {
    width: 192px;
    height: 35px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 16px;
    margin-top: 15px;
  }

  .thumbnail_11 {
    width: 10px;
    height: 18px;
    margin: 69px 0 0 665px;
  }

  .section_20 {
    width: 134px;
    height: 46px;
    margin: 219px 0 80px 738px;
  }

  .text-wrapper_8 {
    background-color: #1a82fb;
    height: 46px;
    width: 134px;
  }

  .text_46 {
    width: 71px;
    height: 18px;
    overflow-wrap: break-word;
    color: white;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin: 13px 0 0 31px;
  }

  .section_8 {
    /* background-color: #e7edff; */

    background-image: url("../assets/images/bb22.png");
    background-size: 100% 100%;

    height: 698px;
    width: 100%;
    /* position: absolute; */
    left: 0;
    top: 1603px;
  }


  .text-group_35 {
    width: 172px;
    height: 58px;
    margin: 100px 0 0 0px;
  }

  .text_49 {
    width: 172px;
    height: 28px;
    overflow-wrap: break-word;
    color: black;
    font-size: 29px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
  }

  .text_50 {
    width: 161px;
    height: 13px;
    overflow-wrap: break-word;
    color: #242424;
    font-size: 13px;
    font-family: SourceHanSansSC-Regular;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    margin: 17px 0 0 6px;
  }

  .grid_4 {
    width: 100%;
    height: 314px;
    flex-wrap: wrap;
    margin: 41px 0 0 0px;

  }

  .itema {
    margin-right: 20px;
    width: 219px;
    height: 145px;
    background: linear-gradient(0deg, #CCE4FF, #C9E2FF, #E8F1FF);
    border: 1px solid #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(175, 201, 233, 0.78);
    border-radius: 18px;
  }

  .list-items_1 {
    width: 219px;
    height: 145px;
    background-size: 231px 157px;
    margin: 0 25px 24px 0;
    box-shadow: 0px 3px 6px 0px rgba(175, 201, 233, 0.78);
    border-radius: 18px;
  }

  .list-items_1:nth-child(3n) {
    margin-right: 0;
  }

  .list-items_1:nth-last-child(-n + 3) {
    margin-bottom: 0;
  }

  .label_3 {
    width: 35px;
    height: 40px;
    /* margin: 39px 0 0 93px; */


  }

  .text_51 {
    width: 180px;
    height: 19px;
    overflow-wrap: break-word;
    color: black;
    font-size: 20px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin: 19px 0 28px 20px;
  }

  .text-wrapper_9 {
    background-color: #1a82fb;
    height: 46px;
    width: 134px;
    margin: 46px 0 93px 0px;
  }

  .text_52 {
    width: 71px;
    height: 18px;
    overflow-wrap: break-word;
    color: white;
    font-size: 18px;
    font-family: SourceHanSansSC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 41px;
    margin: 13px 0 0 31px;
  }

  .text-wrapper_10 {
    box-shadow: 0px 3px 5px 0px rgba(125, 124, 130, 0.5);
    background-color: white;
    border-radius: 5px;
    position: absolute;
    left: 405px;
    top: 63px;
    width: 150px;
    height: 95px;
  }

  .text_53 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: #8c8c8c;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
    margin: 14px 0 0 47px;
  }

  .text_54 {
    width: 102px;
    height: 14px;
    overflow-wrap: break-word;
    color: #8c8c8c;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
    margin: 12px 0 0 24px;
  }

  .text_55 {
    width: 102px;
    height: 14px;
    overflow-wrap: break-word;
    color: #8c8c8c;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
    margin: 12px 0 15px 24px;
  }

  .text-wrapper_11 {
    box-shadow: 0px 3px 5px 0px rgba(125, 124, 130, 0.5);
    background-color: white;
    border-radius: 5px;
    position: absolute;
    left: 593px;
    top: 63px;
    width: 150px;
    height: 95px;
  }

  .text_56 {
    width: 56px;
    height: 14px;
    overflow-wrap: break-word;
    color: #8c8c8c;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
    margin: 14px 0 0 46px;
  }

  .text_57 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: #8c8c8c;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
    margin: 12px 0 0 48px;
  }

  .text_58 {
    width: 27px;
    height: 14px;
    overflow-wrap: break-word;
    color: #8c8c8c;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
    margin: 12px 0 15px 61px;
  }

  .block_5 {
    background-color: #efeff0;
    height: 80px;
    margin: 0;
  }

  .group_32 {
    width: 1032px;
    height: 67px;
    margin: 39px 0 0 0;
  }

  .image_14 {
    width: 234px;
    height: 58px;
  }

  .text-wrapper_33 {
    width: 70px;
    height: 52px;
    margin: 15px 0 0 97px;
  }

  .text_59 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: #010101;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_60 {
    width: 69px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 22px 0 0 1px;
  }

  .text-wrapper_34 {
    width: 79px;
    height: 52px;
    margin: 15px 0 0 241px;
  }

  .text_61 {
    width: 79px;
    height: 16px;
    overflow-wrap: break-word;
    color: #010101;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_62 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 22px;
  }

  .text-wrapper_35 {
    width: 64px;
    height: 51px;
    margin: 15px 0 0 247px;
  }

  .text_63 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: #010101;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_64 {
    width: 55px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 22px;
  }

  .text-wrapper_36 {
    width: 692px;
    height: 13px;
    margin: 19px 0 0 766px;
  }

  .text_65 {
    width: 69px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .text_66 {
    width: 55px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-left: 241px;
  }

  .text_67 {
    width: 55px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-left: 272px;
  }

  .text-wrapper_37 {
    width: 366px;
    height: 14px;
    margin: 19px 0 0 766px;
  }

  .text_68 {
    width: 69px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .text_69 {
    width: 56px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .block_7 {
    background-color: #dbdbdb;
    width: 1467px;
    height: 1px;
    margin: 83px 0 0 0;
  }

  .text-wrapper_38 {
    width: 100%;
    height: 17px;
    padding-left: 200px;
    padding-right: 200px;
    margin-top: 30px;
  }

  .text_70 {
    width: 443px;
    height: 17px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .text_71 {
    width: 202px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }




  .kssy {
    z-index: 1000;
    position: absolute;
    left: 360px;
    top: 360px;
    width: 178px;
    height: 58px;
    background: #1A82FB;
    font-size: 23px;

    font-weight: bold;
    color: #FFFFFF;
    line-height: 46px;
  }

  .lbb {
    position: relative;
  }

  .kssyb {
    z-index: 1000;
    position: absolute;
    top: 680px;
    width: 134px;
    height: 46px;
    background: #1A82FB;
    font-size: 18px;

    font-weight: bold;
    color: #FFFFFF;
    line-height: 46px;
  }


  .kssy-img {
    z-index: 1000;
    position: absolute;
    left: 360px;
    top: 180px;
    width: 520px;
    height: 125px;


  }

  .xtwf {
    font-size: 50px;
    color: #FFFFFF;
    margin-top: 50px;
    margin-bottom: 60px;
    background: #154DCC;
    padding: 10px;
  }

  ::v-deep .abc .el-dialog {
    background: transparent !important;
  }

  ::v-deep .el-carousel__button {
    background-color: transparent;
  }

  ::v-deep .el-carousel__arrow {
    color: #a90606;
  }
</style>
